<template>
  <div class="question">
    <h4>{{ question.text }}</h4>
    <el-radio-group v-model="selectedAnswer">
      <el-radio label="A">{{ question.option_a }}</el-radio>
      <el-radio label="B">{{ question.option_b }}</el-radio>
      <el-radio label="C">{{ question.option_c }}</el-radio>
      <el-radio label="D">{{ question.option_d }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'SingleChoiceQuestionComponent',
  props: {
    question: {
      type: Object,
      required: true
    },
    answer: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedAnswer: this.answer
    };
  },
  watch: {
    selectedAnswer(newVal) {
      this.$emit('update-answer', newVal);
    }
  }
};
</script>

<style scoped>
.question {
  margin-bottom: 20px;
  white-space: pre-wrap;
}
</style>